<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/Public/css/bootstrap.min.css">
    <link rel="stylesheet" href="/Public/css/model.css">
    <script src="/Public/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/Public/css/gxxjkefu-normalize.css">
    <link rel="stylesheet" href="/Public/css/index.css">
    <link rel="stylesheet" href="/Public/css/style.css">
    <link rel="stylesheet" href="/Public/css/pager.css">
    <link rel="stylesheet" href="/Public/css/bootstrap-grid.min.css">
    <script src="/Public/js/echarts.min.js"></script>
    <script src="/Public/js/jquery-3.2.1.js"></script>

</head>
<body>
<div  class="scrollbar" style="overflow:scroll;overflow-x:hidden;margin: 0;width: 100%">
    <li>
        <div class="title_info">
            <span>控制台</span>
        </div>
        <ul class="control_info">
            <li>
                <span class="font_size orange_color"><{$total.order}></span>
                <span>我处理中的工单</span>
            </li>
            <li>
                <span class="font_size orange_color"><{$total.surve}></span>
                <span>需要我处理的调查</span>
            </li>
            <li>
                <span class="font_size orange_color"><{$total.feedback}></span>
                <span>需要处理的留言反馈</span>
            </li>
            <li>
                <span class="font_size orange_color"><{$total.overdue}></span>
                <span>需要处理的逾期提醒</span>
            </li>
        </ul>
    </li>

    <!--柱状图-->
    <div style="margin-top: 25px">
        <div class="title_info">
            <span>工作统计</span>
        </div>
        <ul class="control_info">
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main" style="width: 100%;height:540px;"></div>
        </ul>
    </div>
    <div class="chartBox" style="display: inline">
        <div id="canvas1" class="m-canvas" style="width:680px; height: 300px; background-color: white;">有效外呼日统计</div>
        <div id="canvas2" class="m-canvas"  style="width:680px; height: 300px;background-color: white;">外呼日统计</div>
        <!--<div id="canvas3" class="m-canvas"  style="width:680px; height: 300px;background-color: white;">外呼月统计</div>-->
    </div>
</div>
<script src="/Public/js/jquery-3.2.1.js"></script>
<script src="/Public/js/echarts.common.min.js"></script>


<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例

    //    var feedback=100000;
    //    var answer=100000;
    //    var task=100000;
    //    var order=100000;
    //    var call_out=100000;
    var feedback="<{$feedback}>";
    var answer="<{$answer}>";
    var task="<{$task}>";
    var order="<{$order}>";
    var call_out="<{$call_out}>";
    var myChart = echarts.init(document.getElementById('main'));
    //    var base_int=parseInt(borrowed);
    //    var first=base_int%100;
    // 指定图表的配置项和数据
    option = {
        tooltip: {
            trigger:'axis',
            formatter: "{c}",
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        xAxis: [
            {
                type: 'category',
                show:true,
                data: ['今日呼出（次）','今日接听（次）','今日在线回复（条）','今日任务（个）','今日工单（条）'],
                axisPointer: {
                    type: 'shadow'
                },
                axisTick: {
                    show: false
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '',
                min: 0,
                interval:10,
                axisLabel: {
                    formatter: '{value}'
                },
                axisTick: {
                    show: false
                }
            },
        ],
        label: {
            normal: {
                show: true,
                position: 'top',
                formatter: '{c}'
            }
        },
        series: [
            {
                name:'次数',
                type:'bar',
                barWidth: '40%',
                data:[{value:call_out,
                    itemStyle:{
                        normal:{
                            color:'#65c7ff'
                        }
                    }
                },
                    {value:answer,
                        itemStyle:{
                            normal:{
                                color:'#32aa3a'
                            }
                        }
                    },
                    {value:feedback,
                        itemStyle:{
                            normal:{
                                color:'#5e48e5'
                            }
                        }
                    },{value:task,
                        itemStyle:{
                            normal:{
                                color:'#f4ad50'
                            }
                        }
                    },{value:order,
                        itemStyle:{
                            normal:{
                                color:'#f13f44'
                            }
                        }
                    }
                ]
            },
        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<script>
    //时间
    var times1="<{$times}>";
    var times=times1.split(',');
    //每天外呼
    var out_spot1="<{$out_day_spot}>";
    var out_spot=out_spot1.split(',');
 //每天外呼=all
    var out_spot_all1="<{$out_spot_all}>";
    var out_spot_all=out_spot_all1.split(',');

    var idBox=['canvas1','canvas2']; //对应的每一个id块
    var title_text = ['有效外呼日统计','外呼日统计']; //对应的每一个数据名称
    var dataDate = times; //日期
    var datanumBox = [
        out_spot,
        out_spot_all,
    ]

    // 数据数组
    window.onload = function(){
        drawEcharts(); //数据初始化
        drawEcharts1(); //数据初始化
    }
    function drawEcharts(){

        for(var i = 0; i<idBox.length; i++){

                canvas(idBox[i],datanumBox[i],title_text[i]);
        }
    }
    function canvas(obj,num,title){
        var option_canvas = echarts.init(document.getElementById(obj));
        var option = {
            title: [
                {
                    text: title,
                    left:'20',
                    top:'20',
                    textStyle:{
                        color:'#333',
                        fontStyle:'normal',
                        fontWeight:'normal',
                        fontSize:14,
                    }
                }
            ],
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dataDate
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: title,
                type: 'line',
                smooth: true,
                symbolSize: 8,
                itemStyle: {
                    normal: {
                        color: "#3493f1",
                        lineStyle: {
                            color: "#3493f1"
                        },
                        fontSize:"18"
                    }

                },
                data: num
            }]
        };
        option_canvas.setOption(option,true);
    }

</script>
<script>
    //时间
    var times3="<{$months}>";
    var times13=times3.split(',');
    //每月外呼=all
    var out_month_spot1="<{$out_month_spot}>";
    var out_month_spot=out_month_spot1.split(',');

    console.log('22222',times3+'==='+out_month_spot1);


    var idBox3=['canvas3']; //对应的每一个id块
    var title_text3 = ['外呼月统计']; //对应的每一个数据名称
    var dataDate3 = times13; //日期
    var datanumBox3 = [
        out_month_spot
    ]
//    // 数据数组
//    window.onload = function(){
//        drawEcharts1(); //数据初始化
//    }
    function drawEcharts1(){
        for(var i = 0; i<idBox.length; i++){
            canvas3(idBox3[i],datanumBox3[i],title_text3[i]);
        }
    }
    function canvas3(obj,num,title){
        var option_canvas = echarts.init(document.getElementById(obj));
        var option = {
            title: [
                {
                    text: title,
                    left:'20',
                    top:'20',
                    textStyle:{
                        color:'#333',
                        fontStyle:'normal',
                        fontWeight:'normal',
                        fontSize:14,
                    }
                }
            ],
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dataDate3
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: title,
                type: 'line',
                smooth: true,
                symbolSize: 8,
                itemStyle: {
                    normal: {
                        color: "#3493f1",
                        lineStyle: {
                            color: "#3493f1"
                        },
                        fontSize:"18"
                    }

                },
                data: num
            }]
        };
        option_canvas.setOption(option,true);
    }





</script>

</body>
</html>